<template>
  <div>
    <!--复选框-->
    <input type="checkbox" value="football" v-model="checkedName">足球
    <input type="checkbox" value="baseketball" v-model="checkedName">篮球
    <input type="checkbox" value="volleyball" v-model="checkedName">排球
    <br>
    {{ checkedName }}
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      checkedName: [],
    })
  
    return {
      ...toRefs(state),
    }
  }
}
</script>

<style lang="scss" scoped>

</style>